.checkbox-group {
    display: flex;
    flex-direction: column;
}

.checkbox-group.-inline {
    flex-direction: row;
}

.checkbox {
    position: relative;
    display: flex;
    align-items: center;
    white-space: nowrap;
    outline: 0;
}

.checkbox:last-of-type {
    margin-right: 0;
}

.checkbox .checkbox-label {
    cursor: pointer;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.checkbox .checkbox-label::before, .checkbox .checkbox-label::after {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-flex;
    cursor: pointer;
    width: var(--checkbox--width);
    height: var(--checkbox--height);
}

.checkbox .checkbox-label::before {
    content: "";
    user-select: none;
    transform: translate(0, -50%);
}

.checkbox input:indeterminate ~ .checkbox-label::after {
    mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>minus</title><path d="M0 11.375v5.25c0 0.483 0.392 0.875 0.875 0.875h26.25c0.483 0 0.875-0.392 0.875-0.875v-5.25c0-0.483-0.392-0.875-0.875-0.875h-26.25c-0.483 0-0.875 0.392-0.875 0.875z"></path></svg>');
}

.checkbox .checkbox-label::after {
    content: "";
    z-index: 1;
    text-align: center;
    transform: scale(0) translate(0, -50%);
    border: 1px solid transparent;
    transform-origin: center top;
    mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>check</title><path d="M23.625 3.5l-13.125 13.125-6.125-6.125-4.375 4.375 10.5 10.5 17.5-17.5z"></path></svg>');
    mask-size: var(--checkbox--checkmark--width) var(--checkbox--checkmark--height);
    mask-position: center center;
    mask-repeat: no-repeat;
}

.checkbox input {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 0;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkbox .checkbox-label, .checkbox input, .checkbox input:focus, .checkbox input:active {
    outline: 0;
}

.checkbox input:indeterminate ~ .checkbox-label::after, .checkbox input:checked ~ .checkbox-label::after {
    content: "";
    mask-position: center center;
    mask-repeat: no-repeat;
    transform: scale(1) translate(0, -50%);
}

.checkbox input:disabled ~ .checkbox-label, .checkbox input[readonly] ~ .checkbox-label {
    cursor: default;
}

.checkbox input:disabled ~ .checkbox-label::after, .checkbox input[readonly] ~ .checkbox-label::after, .checkbox input:checked:disabled ~ .checkbox-label::after, .checkbox input:checked[readonly] ~ .checkbox-label::after {
    cursor: not-allowed;
}

.checkbox {
    margin: var(--checkbox--margin, var(--checkbox--margin-top) var(--checkbox--margin-right) var(--checkbox--margin-bottom) var(--checkbox--margin-left));
}

.checkbox .checkbox-label {
    color: var(--checkbox--color);
    font-size: var(--checkbox--font-size);
    padding-left: calc(var(--checkbox--width) + var(--checkbox--margin-right));
    transition-property: var(--checkbox--transition-property);
    transition-duration: var(--checkbox--transition-duration);
    transition-timing-function: var(--checkbox--transition-timing-function);
}

.checkbox .checkbox-label::before {
    background: var(--checkbox--background);
    border-top-color: var(--checkbox--border-top-color);
    border-right-color: var(--checkbox--border-right-color);
    border-bottom-color: var(--checkbox--border-bottom-color);
    border-left-color: var(--checkbox--border-left-color);
    border-width: var(--checkbox--border-width, var(--checkbox--border-top-width) var(--checkbox--border-right-width) var(--checkbox--border-bottom-width) var(--checkbox--border-left-width));
    border-style: var(--checkbox--border-style, var(--checkbox--border-top-style) var(--checkbox--border-right-style) var(--checkbox--border-bottom-style) var(--checkbox--border-left-style));
    border-radius: var(--checkbox--border-radius, var(--checkbox--border-top-left-radius) var(--checkbox--border-top-right-radius) var(--checkbox--border-bottom-right-radius) var(--checkbox--border-bottom-left-radius));
    box-shadow: var(--checkbox--box-shadow, var(--checkbox--box-shadow-offset-x) var(--checkbox--box-shadow-offset-y) var(--checkbox--box-shadow-blur-radius) var(--checkbox--box-shadow-spread-radius) var(--checkbox--box-shadow-color));
    transition-property: var(--checkbox--transition-property);
    transition-duration: var(--checkbox--transition-duration);
    transition-timing-function: var(--checkbox--transition-timing-function);
}

.checkbox .checkbox-label::after {
    background: var(--checkbox--checkmark--color);
    transition-property: var(--checkbox--transition-property);
    transition-duration: var(--checkbox--transition-duration);
    transition-timing-function: var(--checkbox--transition-timing-function);
}

.checkbox:not(.-disabled) .checkbox-label:focus::before {
    box-shadow: var(--checkbox--focus--box-shadow, var(--checkbox--focus--box-shadow-offset-x) var(--checkbox--focus--box-shadow-offset-y) var(--checkbox--focus--box-shadow-blur-radius) var(--checkbox--focus--box-shadow-spread-radius) var(--checkbox--focus--box-shadow-color));
}

.checkbox input:checked ~ .checkbox-label::before, .checkbox input:indeterminate ~ .checkbox-label::before {
    background: var(--checkbox--checked--background);
    border-top-color: var(--checkbox--checked--border-top-color);
    border-right-color: var(--checkbox--checked--border-right-color);
    border-bottom-color: var(--checkbox--checked--border-bottom-color);
    border-left-color: var(--checkbox--checked--border-left-color);
}

.checkbox input:disabled ~ .checkbox-label {
    color: var(--checkbox--disabled--color);
    cursor: default;
}

.checkbox input:disabled ~ .checkbox-label::before {
    background: var(--checkbox--disabled--background);
    cursor: not-allowed;
}

.checkbox input[readonly] ~ .checkbox-label::before {
    background: var(--checkbox--readonly--background);
    cursor: not-allowed;
}

.checkbox input:checked:disabled ~ .checkbox-label::before {
    background: var(--checkbox--checked--disabled--background);
    border-top-color: var(--checkbox--checked--disabled--border-top-color);
    border-right-color: var(--checkbox--checked--disabled--border-right-color);
    border-bottom-color: var(--checkbox--checked--disabled--border-bottom-color);
    border-left-color: var(--checkbox--checked--disabled--border-left-color);
}

.checkbox input[readonly]:checked ~ .checkbox-label::before {
    background: var(--checkbox--checked--readonly--background);
    border-top-color: var(--checkbox--checked--readonly--border-top-color);
    border-right-color: var(--checkbox--checked--readonly--border-right-color);
    border-bottom-color: var(--checkbox--checked--readonly--border-bottom-color);
    border-left-color: var(--checkbox--checked--readonly--border-left-color);
}

.checkbox.-sm {
    --checkbox--border-top-left-radius: var(--checkbox--sm--border-top-left-radius);
    --checkbox--border-top-right-radius: var(--checkbox--sm--border-top-right-radius);
    --checkbox--border-bottom-right-radius: var(--checkbox--sm--border-bottom-right-radius);
    --checkbox--border-bottom-left-radius: var(--checkbox--sm--border-bottom-left-radius);
    --checkbox--font-size: var(--checkbox--sm--font-size);
    --checkbox--margin-top: var(--checkbox--sm--margin-top);
    --checkbox--margin-right: var(--checkbox--sm--margin-right);
    --checkbox--margin-bottom: var(--checkbox--sm--margin-bottom);
    --checkbox--margin-left: var(--checkbox--sm--margin-left);
    --checkbox--width: var(--checkbox--sm--width);
    --checkbox--height: var(--checkbox--sm--height);
    --checkbox--checkmark--width: var(--checkbox--sm--checkmark--width);
    --checkbox--checkmark--height: var(--checkbox--sm--checkmark--height);
}

.checkbox.-md {
    --checkbox--border-top-left-radius: var(--checkbox--md--border-top-left-radius);
    --checkbox--border-top-right-radius: var(--checkbox--md--border-top-right-radius);
    --checkbox--border-bottom-right-radius: var(--checkbox--md--border-bottom-right-radius);
    --checkbox--border-bottom-left-radius: var(--checkbox--md--border-bottom-left-radius);
    --checkbox--font-size: var(--checkbox--md--font-size);
    --checkbox--margin-top: var(--checkbox--md--margin-top);
    --checkbox--margin-right: var(--checkbox--md--margin-right);
    --checkbox--margin-bottom: var(--checkbox--md--margin-bottom);
    --checkbox--margin-left: var(--checkbox--md--margin-left);
    --checkbox--width: var(--checkbox--md--width);
    --checkbox--height: var(--checkbox--md--height);
    --checkbox--checkmark--width: var(--checkbox--md--checkmark--width);
    --checkbox--checkmark--height: var(--checkbox--md--checkmark--height);
}

.checkbox.-lg {
    --checkbox--border-top-left-radius: var(--checkbox--lg--border-top-left-radius);
    --checkbox--border-top-right-radius: var(--checkbox--lg--border-top-right-radius);
    --checkbox--border-bottom-right-radius: var(--checkbox--lg--border-bottom-right-radius);
    --checkbox--border-bottom-left-radius: var(--checkbox--lg--border-bottom-left-radius);
    --checkbox--font-size: var(--checkbox--lg--font-size);
    --checkbox--margin-top: var(--checkbox--lg--margin-top);
    --checkbox--margin-right: var(--checkbox--lg--margin-right);
    --checkbox--margin-bottom: var(--checkbox--lg--margin-bottom);
    --checkbox--margin-left: var(--checkbox--lg--margin-left);
    --checkbox--width: var(--checkbox--lg--width);
    --checkbox--height: var(--checkbox--lg--height);
    --checkbox--checkmark--width: var(--checkbox--lg--checkmark--width);
    --checkbox--checkmark--height: var(--checkbox--lg--checkmark--height);
}

.checkbox.-light {
    --checkbox--border-top-color: var(--checkbox--light--border-top-color);
    --checkbox--border-right-color: var(--checkbox--light--border-right-color);
    --checkbox--border-bottom-color: var(--checkbox--light--border-bottom-color);
    --checkbox--border-left-color: var(--checkbox--light--border-left-color);
    --checkbox--background: var(--checkbox--light--background);
    --checkbox--color: var(--checkbox--light--color);
    --checkbox--disabled--background: var(--checkbox--light--disabled--background);
    --checkbox--disabled--border-top-color: var(--checkbox--light--disabled--border-top-color);
    --checkbox--disabled--border-right-color: var(--checkbox--light--disabled--border-right-color);
    --checkbox--disabled--border-bottom-color: var(--checkbox--light--disabled--border-bottom-color);
    --checkbox--disabled--border-left-color: var(--checkbox--light--disabled--border-left-color);
    --checkbox--readonly--background: var(--checkbox--light--readonly--background);
    --checkbox--readonly--border-top-color: var(--checkbox--light--readonly--border-top-color);
    --checkbox--readonly--border-right-color: var(--checkbox--light--readonly--border-right-color);
    --checkbox--readonly--border-bottom-color: var(--checkbox--light--readonly--border-bottom-color);
    --checkbox--readonly--border-left-color: var(--checkbox--light--readonly--border-left-color);
    --checkbox--checked--disabled--background: var(--checkbox--light--checked--disabled--background);
    --checkbox--checked--disabled--border-top-color: var(--checkbox--light--checked--disabled--border-top-color);
    --checkbox--checked--disabled--border-right-color: var(--checkbox--light--checked--disabled--border-right-color);
    --checkbox--checked--disabled--border-bottom-color: var(--checkbox--light--checked--disabled--border-bottom-color);
    --checkbox--checked--disabled--border-left-color: var(--checkbox--light--checked--disabled--border-left-color);
    --checkbox--checked--readonly--background: var(--checkbox--light--checked--readonly--background);
    --checkbox--checked--readonly--border-top-color: var(--checkbox--light--checked--readonly--border-top-color);
    --checkbox--checked--readonly--border-right-color: var(--checkbox--light--checked--readonly--border-right-color);
    --checkbox--checked--readonly--border-bottom-color: var(--checkbox--light--checked--readonly--border-bottom-color);
    --checkbox--checked--readonly--border-left-color: var(--checkbox--light--checked--readonly--border-left-color);
}

.checkbox.-dark {
    --checkbox--border-top-color: var(--checkbox--dark--border-top-color);
    --checkbox--border-right-color: var(--checkbox--dark--border-right-color);
    --checkbox--border-bottom-color: var(--checkbox--dark--border-bottom-color);
    --checkbox--border-left-color: var(--checkbox--dark--border-left-color);
    --checkbox--background: var(--checkbox--dark--background);
    --checkbox--color: var(--checkbox--dark--color);
    --checkbox--disabled--background: var(--checkbox--dark--disabled--background);
    --checkbox--disabled--border-top-color: var(--checkbox--dark--disabled--border-top-color);
    --checkbox--disabled--border-right-color: var(--checkbox--dark--disabled--border-right-color);
    --checkbox--disabled--border-bottom-color: var(--checkbox--dark--disabled--border-bottom-color);
    --checkbox--disabled--border-left-color: var(--checkbox--dark--disabled--border-left-color);
    --checkbox--readonly--background: var(--checkbox--dark--readonly--background);
    --checkbox--readonly--border-top-color: var(--checkbox--dark--readonly--border-top-color);
    --checkbox--readonly--border-right-color: var(--checkbox--dark--readonly--border-right-color);
    --checkbox--readonly--border-bottom-color: var(--checkbox--dark--readonly--border-bottom-color);
    --checkbox--readonly--border-left-color: var(--checkbox--dark--readonly--border-left-color);
    --checkbox--checked--disabled--background: var(--checkbox--dark--checked--disabled--background);
    --checkbox--checked--disabled--border-top-color: var(--checkbox--dark--checked--disabled--border-top-color);
    --checkbox--checked--disabled--border-right-color: var(--checkbox--dark--checked--disabled--border-right-color);
    --checkbox--checked--disabled--border-bottom-color: var(--checkbox--dark--checked--disabled--border-bottom-color);
    --checkbox--checked--disabled--border-left-color: var(--checkbox--dark--checked--disabled--border-left-color);
    --checkbox--checked--readonly--background: var(--checkbox--dark--checked--readonly--background);
    --checkbox--checked--readonly--border-top-color: var(--checkbox--dark--checked--readonly--border-top-color);
    --checkbox--checked--readonly--border-right-color: var(--checkbox--dark--checked--readonly--border-right-color);
    --checkbox--checked--readonly--border-bottom-color: var(--checkbox--dark--checked--readonly--border-bottom-color);
    --checkbox--checked--readonly--border-left-color: var(--checkbox--dark--checked--readonly--border-left-color);
}

.checkbox.-native input {
    top: auto;
    left: auto;
    position: relative;
    opacity: 1;
    height: auto;
    width: auto;
}

.checkbox.-native .checkbox-label {
    padding-left: var(--checkbox--margin-right);
}

.checkbox.-native .checkbox-label::before, .checkbox.-native .checkbox-label::after {
    display: none;
}
